@import "_handle";

// 覆盖element  dropdown样式
.el-dropdown-menu {
  background-color: #082741 !important;
}

.el-dropdown-menu__item {
  color: #fff !important;
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #114258 !important;
}


// 覆盖select popper
.custom-select-popper .el-select-dropdown__item {
  color: #fff;
}

.custom-select-popper.el-select-dropdown {
  background-color: #0d1a29;
  border-color: #05c9bd;
}

.custom-select-popper .el-select-dropdown__item.hover {
  background-color: #2f5886;
  color: #fff;
}

.custom-select-popper .el-select-dropdown__item:hover {
  background-color: #1b375a;
  color: #fff;
}

.custom-select-popper .popper__arrow::after {
  border-bottom-color: rgba(3, 245, 226, 0.5) !important;
}

.custom-select-popper.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
.custom-select-popper.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
  background-color: #2f5886 !important;
}

.custom-select-popper.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  color: #ffffff;
  background-color: #2f5886;
}

.v-modal {
  opacity: 0.2 !important;
}

// cesium 控件
.distance-legend {
  right: 150px;
  bottom: 10px;
  left: auto;
}

// 帧率控件
.cesium-performanceDisplay-defaultContainer {
  right: auto;
  top: auto;
  left: 20px;
  bottom: 90px;
}

.cesium-performanceDisplay {
  padding: 7px;
  border-radius: 5px;
  border: 0px solid #2a2b2e00;
  // background-color: #2a2b2ee7;
  @include background_color("panel-background-color");
  font: bold 12px sans-serif;
}

.compass {
  top: 80px;
}

.navigation-controls {
  top: 180px;
}

.cesium-viewer-bottom {
  display: none;
}

.bar {
  height: 30px;
  line-height: 30px;
  padding: 5px 20px;
  border: 1px solid rgba(232, 234, 237, 0.12);
  border-left: none;
  border-right: none;
  background: #292a2d;
  color: #9aa0a6;
  font-size: 15px;
}

// input
.el-input__inner {
  background: transparent !important;
  color: #fff !important;
  border-color: #6b6e76;
}

.el-input__inner:focus,
.el-input__inner:hover {
  border-color: #6b6e76;
}

// input group btn
.el-input-group__append,
.el-input-group__prepend {
  background: transparent !important;
  background-color: transparent !important;
  border-color: #6b6e76;

  i {
    color: #9b9faa !important;
  }
}


// 密码框自动填充后修改背景颜色问题 -解决
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #FFFFFF !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

// 
.el-message-box {
  border-color: #2a2b2e;
  background-color: #2a2b2e;
}

.el-message-box__title,
.el-message-box__content {
  color: #fff;
}

// tree 
.panel .el-tree {
  background-color: transparent !important;
  color: white !important;
}

.panel .el-tree-node.is-current>.el-tree-node__content {
  background-color: rgb(22, 23, 27) !important;
}

.panel .el-tree-node__content:hover,
.panel .el-tree-node:focus>.el-tree-node__content {
  background-color: rgb(62, 64, 77);
}


.panel .el-checkbox__input.is-checked .el-checkbox__inner,
.panel .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #8ab4f8 !important;
  border-color: #8ab4f8 !important;
}

// popover
.custom-popper {
  min-width: auto !important;
  background: #2a2b2e !important;
  border-color: rgb(95, 99, 104) !important;

  .popper__arrow {
    filter: drop-shadow(0 2px 12px rgb(95, 99, 104));
  }

  .popper__arrow::after {
    border-right-color: #2a2b2e !important;
  }
}


// treeselect
.treeselect-main {

  .vue-treeselect__control {
    background: transparent !important;
    border-color: #5f6368 !important;
  }

  .vue-treeselect__menu {
    color: #fff;
    // background: #4f5157 !important;
    // border-color: #5f6368 !important;
    @include background_color("panel-background-color");
  }

  .vue-treeselect__option--highlight {
    // background: #3e3f44 !important;
    @include background_color("panel-background-color");
  }

  .vue-treeselect__option--selected,
  .vue-treeselect__option--selected:hover {
    // background: #3e3f44 !important;
    @include background_color("panel-background-color");
  }

  .vue-treeselect__single-value {
    color: #fff;
  }
}


// table
.table-box {
  margin: 10px 0;

  .el-table {
    border-radius: 4px;
    border-color: #5f6368;
    background-color: transparent !important;
  }

  .el-table::before,
  .el-table__fixed-right::before,
  .el-table__fixed::before,
  .el-table--border::after {
    background: #5f6368;
    background-color: #5f6368;
  }
}

.el-table th {
  color: #ffffff;
  font-size: 15px;
  background-color: transparent !important;
  border: 0;
  height: 25px;
  line-height: 25px;
  padding: 10px 0;
  text-align: center;
  border-color: #5f6368 !important;
}

.el-table tr,
.el-table td {
  color: #ffffff;
  font-size: 14px;
  background-color: transparent !important;
  border: 0;
  height: 25px;
  line-height: 25px;
  padding: 5px 0;
  text-align: center;
  border-color: #5f6368 !important;
}

.el-table__body tr.current-row>td.el-table__cell {
  background-color: #60636b !important;
}

.el-button--text {
  color: #8ab4f8;
}

// checkbox
.el-checkbox {
  color: rgb(241, 241, 241);
}

.el-checkbox__input.is-checked+.el-checkbox__label {
  color: #8ab4f8;
}

.el-popper {
  padding: 0px;
  min-width: auto;
  margin-top: 0px;
  border-radius: 2px;
  border: 0px solid #EBEEF5;
  background-color: #2a2b2e;

  .popper__arrow {
    border-bottom-color: #2a2b2e !important;
  }

  .popper__arrow::after {
    border-bottom-color: #2a2b2e !important;
  }
}

#videos {
  display: none;
}

.el-dialog {
  background: transparent;

  .el-dialog__body {
    // background-color: #2a2b2e;
    padding: 10px 10px;
    @include background_color("panel-background-color");
  }

  .el-dialog__header {
    padding: 0 10px;
    height: 52px;
    line-height: 52px;
    // background: #2a2b2e;
    @include background_color("panel-background-color");

    .el-dialog__title {
      // color: #fff;
      @include font_color("label-color");
    }
  }
}

.el-button {
  padding: 7px 10px !important;
}

.el-button+.el-button,
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
  margin-left: 0px;
}